<template>
  <div class="app-card" @click="handleAppClick">
    <div class="app-cover">
      <img v-if="app.cover" :src="app.cover" :alt="app.appName" class="cover-image" />
      <div v-else class="cover-placeholder">
        <CodeOutlined class="placeholder-icon" />
      </div>
      <div class="app-overlay">
        <div class="overlay-actions">
          <a-button type="primary" size="small" @click.stop="handlePreview">
            <template #icon>
              <EyeOutlined />
            </template>
            预览
          </a-button>
          <a-button size="small" @click.stop="handleAppClick">
            <template #icon>
              <CopyOutlined />
            </template>
            复制
          </a-button>
        </div>
      </div>
    </div>
    <div class="app-info">
      <div class="app-header">
        <h3 class="app-name">{{ app.appName || '未命名应用' }}</h3>
        <div v-if="app.appCategory" class="app-category">
          <span class="category-tag">{{ app.appCategory }}</span>
        </div>
      </div>
      <div class="app-meta">
        <span class="creator">
          <div class="user-avatar">
            <img v-if="app.user?.userAvatar" :src="app.user.userAvatar" :alt="app.user.userName" class="avatar-image" />
            <div v-else class="default-avatar">
              <UserOutlined />
            </div>
          </div>
          {{ app.user?.userName || '匿名用户' }}
        </span>
        <span class="time">{{ formatTime(app.createTime) }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { CodeOutlined, UserOutlined, EyeOutlined, CopyOutlined } from '@ant-design/icons-vue'
import { getStaticPreviewUrl } from '@/env'

interface Props {
  app: API.AppVO
}

const props = defineProps<Props>()

// 应用卡片点击 - 改为预览应用
const handleAppClick = () => {
  handlePreview()
}

// 预览应用
const handlePreview = () => {
  if (props.app.id && props.app.codeGenType) {
    // 获取静态预览URL
    const previewUrl = getStaticPreviewUrl(props.app.codeGenType, props.app.id.toString())
    console.log('预览URL:', previewUrl)
    
    // 在新窗口打开预览页面
    window.open(previewUrl, '_blank')
  } else {
    console.warn('应用ID或代码生成类型缺失，无法预览')
  }
}

// 格式化时间
const formatTime = (timeStr?: string) => {
  if (!timeStr) return '未知时间'

  const date = new Date(timeStr)
  
  // 格式化为 YYYY-MM-DD 格式
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  
  return `${year}-${month}-${day}`
}
</script>

<style lang="scss" scoped>
.app-card {
  background: white;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  }

  .app-cover {
    height: 200px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;

    &:hover {
      .cover-image {
        transform: scale(1.05);
      }

      .app-overlay {
        opacity: 1;
      }
    }

    .cover-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }

    .cover-placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;

      .placeholder-icon {
        font-size: 3rem;
        color: #667eea;
      }
    }

    .app-overlay {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(135deg, rgba(197, 204, 236, 0.9) 0%, rgba(116, 110, 120, 0.9) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: all 0.3s ease;
      backdrop-filter: blur(2px);

      .overlay-actions {
        display: flex;
        gap: 12px;
        flex-direction: row;

        .ant-btn {
          border-radius: 20px;
          height: 36px;
          padding: 0 16px;
          font-weight: 500;
          border: 2px solid rgba(255, 255, 255, 0.3);
          backdrop-filter: blur(10px);
          transition: all 0.3s ease;

          &.ant-btn-primary {
            background: rgba(255, 255, 255, 0.2);
            color: white;

            &:hover {
              background: rgba(255, 255, 255, 0.3);
              transform: translateY(-2px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
            }
          }

          &:not(.ant-btn-primary) {
            background: rgba(255, 255, 255, 0.15);
            color: white;
            border-color: rgba(255, 255, 255, 0.3);

            &:hover {
              background: rgba(255, 255, 255, 0.25);
              transform: translateY(-2px);
              box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
            }
          }
        }
      }
    }
  }

  .app-info {
    padding: 10px 20px;

    .app-header {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 8px;
      gap: 8px;

      .app-name {
        font-size: 1.1rem;
        font-weight: 600;
        color: #333;
        line-height: 1.4;
        flex: 1;
        margin: 0;
      }

      .app-category {
        flex-shrink: 0;

        .category-tag {
          display: inline-block;
          padding: 2px 8px;
          font-size: 0.7rem;
          font-weight: 500;
          color: #6366f1;
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
          border: 1px solid rgba(99, 102, 241, 0.2);
          border-radius: 12px;
          white-space: nowrap;
          transition: all 0.3s ease;
          
          &:hover {
            background: linear-gradient(135deg, rgba(99, 102, 241, 0.15) 0%, rgba(139, 92, 246, 0.15) 100%);
            border-color: rgba(99, 102, 241, 0.3);
            transform: translateY(-1px);
          }
        }
      }
    }

    .app-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 0.875rem;
      color: #999;

      .creator {
        display: flex;
        align-items: center;
        gap: 8px;

        .user-avatar {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
          flex-shrink: 0;

          .avatar-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          .default-avatar {
            color: white;
            font-size: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
      }

      .time {
        color: #bbb;
      }
    }
  }
}
</style>
